<template>
  <div class="albums">
    <div class="title">
      <span>搜索"{{ keywords }}",</span>
      <span
        >共<span :style="{ color: 'rgb(255, 165, 0)' }">{{ count }}</span
        >个专辑</span
      >
    </div>
    <div class="result">
      <ul>
        <li>
          <div style="background-color: rgb(247, 247, 247)">
            <span>no</span>
          </div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>专辑</span>
          </div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>歌手</span>
          </div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>发行时间</span>
          </div>
        </li>
        <li
          v-for="(item, index) in albumsList"
          :key="index"
          @click="gotoDetail(item)"
        >
          <div class="no">
            <span>{{ index + 1 }}</span>
          </div>
          <div class="name">
            <img v-lazy="item.picUrl" alt="" />
            <span>{{ item.name }}</span>
            <span v-show="item.alias.length > 0" style="color: #999"
              >({{ item.alias[0] }})</span
            >
          </div>
          <div class="artName">
            <span v-for="(artItem, artIndex) in item.artists" :key="artIndex">
              <span>{{ artItem.name }}</span>
              <span></span>
            </span>
          </div>
          <div class="time">
            <span>{{ item.publishTime }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: null,
      //   总数
      count: null,
      // 专辑列表
      albumsList: [],
    };
  },
  methods: {
    gotoDetail(item) {
      this.$router.replace({
        name: "album",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    this.keywords = this.$route.query.keywords;
    this.$axios({
      url: "/cloudsearch",
      params: {
        keywords: this.keywords,
        type: 10,
      },
    }).then((res) => {
      this.count = res.data.result.albumCount;
      this.albumsList = res.data.result.albums;
      this.albumsList.forEach((e) => {
        let time = new Date(e.publishTime);
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        e.publishTime = year + " - " + month + " - " + date;
      });
    });
  },
};
</script>

<style scoped>
@import url("../../css/result/albums");
</style>